<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>电力符号渲染</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
<div id="map"></div>
<div class="opt_panel">
    <button onclick="enableSelect()">开启选择</button>
    <button onclick="disableSelect()">关闭选择</button>
</div>
<script>
    //示例说明：
    //本示例说明如何添加电网符号
    //【注：SymbolLayer将每个设备都放在了单独的图层中，以减少数据遍历，当添加的设备较多时（200个）就会明显有卡顿，所以SymbolLayer只适合进行少量设备编辑的场景，如需大量渲染设备且无空间编辑需求请使用GridFeatureLayer】

    //自定义示例参数
    mapOptions = {
        zoom: 18,
        center: [116, 31]
    }

    //示例代码

    var symbolLayer
    //默认设备
    var testDatas

    //移除的设备
    var removedDevs = []

    //添加设备
    function addEleDev() {
        if (removedDevs.length) {
            let dev = removedDevs.pop()
            testDatas.push(dev)
            symbolLayer.addEleDevs(testDatas)
        }
    }

    //移除设备
    function removeEleDev() {
        if (testDatas.length) {
            let dev = testDatas.pop()
            removedDevs.push(dev)
            symbolLayer.removeEleDevs([dev])
        }

    }

    function enableSelect(){
        if(selectTool && !selectTool.getEnable()){
            selectTool.enable()
        }
    }

    function disableSelect(){
        if(selectTool && selectTool.getEnable()){
            selectTool.disable()
        }
    }


    function initPage() {
        symbolLayer = new egisV2.layer.SymbolLayer(map)
        //添加的设备，如果需要删除，方法如下:
        testDatas = [
            // new egisV2.symbol.ElePointSymbol({
            //     // devId: 'a10001',//oid，psrid
            //     devTypeId: '301000',//设备类型
            //     symbolId: "4020290",//符号ID //'1030021',
            //     symbolRotate: 20,//旋转角度
            //     symbolSize: 10,//大小
            //     symbolColor: '#ff0000',//颜色
            //     symbolOpacity: 1,//透明度
            //     symbolScalable: false,//缩放
            //     coordinates: [116, 31],//坐标
            //     attributes: {a: 1, b: 2}//其它信息
            // }),
            //
            // new egisV2.symbol.ElePointSymbol({
            //     // devId: 'a10001',//oid，psrid
            //     devTypeId: '301000',//设备类型
            //     symbolId: "4020290",//符号ID //'1030021',
            //     symbolRotate: 20,//旋转角度
            //     symbolSize: 10,//大小
            //     symbolColor: '#ff0000',//颜色
            //     symbolOpacity: 1,//透明度
            //     symbolScalable: false,//缩放
            //     coordinates: [116.0001, 31],//坐标
            //     attributes: {a: 1, b: 2}//其它信息
            // }),
            //
            // // ,
            // new egisV2.symbol.EleLineSymbol(
            //     {
            //         // devId: 'b20001',//oid，psrid
            //         devTypeId: '35421985',//设备类型
            //         symbolId: '42801',//'410',//符号ID
            //
            //         // symbolId: '2010010',//'410',//符号ID
            //         symbolWidth: 10,//线宽
            //         symbolColor: '#ff0000',//颜色
            //         symbolOpacity: 1,//透明度
            //         coordinates:[[[116, 31], [116.0005, 31], [116.0005, 31.0005], [116, 31.0005], [116, 31]]],
            //         // coordinates:testCoords,
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // ),
            new egisV2.symbol.EleFillSymbol(
                {
                    devId: 'b20001ddsds',//oid，psrid
                    devTypeId: '20011',//设备类型
                    symbolColor: '#ff0000',//颜色
                    symbolFillColor: '#00ff00',//透明度
                    symbolFillOpacity:0.1,//透明度
                    coordinates:[[[[118.1418,24.5387],[118.1473,24.523],[118.1314,24.527],[118.1418,24.5387]]],[[[118.1473,24.523],[118.1846,24.5139],[118.1513,24.5117],[118.1473,24.523]]]],
                    // coordinates: [[[116, 31], [116.0005, 31], [116.0005, 31.0005], [116, 31.0005], [116, 31]]],//坐标
                    attributes: {c: 3, d: 4}//其它属性
                }
            ),
            // new egisV2.symbol.EleTextSymbol(
            //     {
            //         devId: 'xxxxdddd',//oid，psrid
            //         devTypeId: 'dsae',//设备类型
            //         symbolColor: '#ff00ff',//颜色
            //         symbolSize: 1,//大小
            //         symbolColor: '#ff0000',//颜色
            //         symbolText: '测试文本',//文本
            //         coordinates: [116.001, 31.001],//坐标
            //         attributes: {c: 3, d: 4}//其它属性
            //     }
            // )

        ]
        // 渲染测试(效率较低)
        // for (let i = 0; i < 20; i++) {
        //     for (let j = 0; j < 10; j++) {
        //         testDatas.push(
        //             new egisV2.symbol.ElePointSymbol({
        //                 devId: 'a10001' + i + j,//oid，psrid
        //                 devTypeId: '301000',//设备类型
        //                 symbolId: "4020290",//符号ID
        //                 symbolRotate: 20,//旋转角度
        //                 symbolSize: 2,//大小
        //                 symbolColor: '#ff0000',//颜色
        //                 symbolOpacity: 1,//透明度
        //                 symbolScalable: false,//缩放
        //                 coordinates: [116 + 0.00002 * i, 31 + 0.00005 * j],//坐标
        //                 attributes: {a: 1, b: 2}//其它信息
        //             })
        //         )
        //     }
        // }
        symbolLayer.addEleDevs(testDatas)

        initSelectTool()
        // selectTool.enable()

        map.egis.selectionSet.setDataSourceCallback(cb => {
            for (let i = 0; i < testDatas.length; i++) {
                let eleSym = testDatas[i]
                let fea = eleSym._toFeature()
                fea.properties.layerid = eleSym.getLayerKey()
                cb(eleSym.type, fea)
            }
        })
    }

    window.onload = function () {
        loadGeoMap(initPage)
        // loadPowerGrid_microService(initPage)
    }

</script>
</body>
</html>
